<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bug列表维护</title>
    <style>
		/* 共享 */
		.button{
			display: inline-block;
			*display: inline;
			zoom: 1;
			padding: 6px 20px;
			margin: 0;
			cursor: pointer;
			border: 1px solid #bbb;
			overflow: visible;
			font: bold 13px arial, helvetica, sans-serif;
			text-decoration: none;
			white-space: nowrap;
			color: #555;
			background-color: #ddd;
			background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
			background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			background-image: -o-linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0));
			-webkit-transition: background-color .2s ease-out;
			-moz-transition: background-color .2s ease-out;
			-ms-transition: background-color .2s ease-out;
			-o-transition: background-color .2s ease-out;
			transition: background-color .2s ease-out;
			background-clip: padding-box; /* Fix bleeding */
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
			border-radius: 3px;
			-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
			-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
			box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
			text-shadow: 0 1px 0 rgba(255,255,255, .9);
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;
		}
		.button:active{
			background: #e9e9e9;
			position: relative;
			top: 1px;
			text-shadow: none;
			-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
			-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
			box-shadow: 0 1px 1px rgba(0, 0, 0, .3) inset;
		}
		.button.red{
			color: #fff;
			text-shadow: 0 1px 0 rgba(0,0,0,.2);
			background-image: -webkit-gradient(linear, to right top, to right bottom, from(rgba(255,255,255,.3)), to(rgba(255,255,255,0)));
			background-image: -webkit-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
			background-image: -moz-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
			background-image: -ms-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
			background-image: -o-linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
			background-image: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,0));
		}
		.button.red{
			background-color: #ca3535;
			border-color: #c43c35;
		}
		.button.red:hover{
			background-color: #ee5f5b;
		}
		.button.red:active{
			background: #c43c35;
		}
		.button.green{
			background-color: #57a957;
			border-color: #57a957;
		}
		.button.green:hover{
			background-color: #62c462;
		}
		.button.green:active{
			background: #57a957;
		}

        /* header */
        .header {
            margin-bottom: 20px;
            margin-top: 20px;
        }
        /* list */
        table{
            width: 40%;
            border-collapse: collapse;
        }
        table caption{
            font-size: 1em;
            font-weight: bold;
            margin: 1em 0;
        }
        .c1,.c2{
            width: 100px;
        }
        th {
            border: 1px solid #999;
            text-align: center;
            padding: 5px 0;
        }
        table thead tr{
            background-color: #008c8c;
            color: #fff;
        }
        /* item */
        table tbody tr:nth-child(odd){
            background-color: #eee;
        }
        table tbody tr:hover{
            background-color: #ccc;
        }
        table tbody tr td:first-child{
            color: #f40;
        }
        td{
            border: 1px solid #999;
            text-align: center;
            padding: 5px 0;
        }
        /* footer */
        .footer{
            margin-top: 10px;
        }
        .footer span{
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <textarea cols="105" rows="4" placeholder="请输入BUG的描述信息"></textarea>
        <br>
        <button class="small green button">保存</button>
    </div>
    <div>
        <table>
            <thead>
                <tr>
                    <th class="c1">全选 <input type="checkbox"></th>
                    <th>bug描述</th>
                    <th class="c2">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" checked="true"></td>
                    <td>xxxxxx</td>
                    <td><button class="small red button">删除</button></td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>yyyyyy</td>
                    <td><button class="small red button">删除</button></td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="footer">
        <button class="small red button">清除已解决</button>
        <span>当前BUG总量2个，已解决1个</span>
    </div>
</body>
</html>